<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">

    <head th:include="include :: header"></head>
	<style>
		 .table > tbody > tr > td{text-align: center;}
	</style>

	<body class="gray-bg">
		<div class="wrapper wrapper-content animated fadeInRight">
			<div class="col-sm-12">
				<div class="ibox float-e-margins">
					<div class="ibox-title">
						<h5>表单</h5>
						<a class="pull-right" onclick="returnStep()" href="#"><h5>返回</h5></a>
						<!--<div class="pull-right">-->
							<!--<button class="btn btn-success" onclick="returnStep()">返回</button>-->
						<!--</div>-->
					</div>
					<div class="ibox-content" >
						<div class="table-responsive" id="table">
						<table class="table table-bordered">
							<!--<caption>统计时间：2019-06-04</caption>-->
							<tr class="success">
								<td colspan="16" style="text-align: center">
									统计时间：<span id="statisticsTime"></span>
								</td>
							</tr>

							<!--<tr class="warning">-->
								<!--<td>NO</td>-->

								<!--<td>产品信息</td>-->

								<!--<td>合格</td>-->

								<!--<td colspan="6">食盐</td>-->

								<!--<td colspan="6">总结</td>-->

								<!--<td>次数</td>-->

							<!--</tr>-->

							<!--<tr class="active">-->
								<!--<td></td>-->
								<!--<td></td>-->
								<!--<td></td>-->
                                <!--<td>次数</td>-->
								<!--<td>平均值</td>-->
								<!--<td>参考值</td>-->
								<!--<td>偏高</td>-->
								<!--<td>偏低</td>-->
								<!--<td>合格</td>-->
								 <!--<td>次数</td>-->
								<!--<td>平均值</td>-->
								<!--<td>参考值</td>-->
								<!--<td>偏高</td>-->
								<!--<td>偏低</td>-->
								<!--<td>合格</td>-->
								<!--<td>0</td>-->
								<!---->
							<!--</tr>-->
							<!--<tr>-->
								<!--<td>1</td>-->
								<!--<td>精制210g</td>-->
								<!--<td>100%</td>-->
                                <!--<td>5</td>-->
								<!--<td>7.18</td>-->
								<!--<td>6.5-6.7</td>-->
								<!--<td>0.0%</td>-->
								<!--<td>0.0%</td>-->
								<!--<td>100%</td>-->
								<!--<td>5</td>-->
								<!--<td>7.18</td>-->
								<!--<td>6.5-6.7</td>-->
								<!--<td>0.0%</td>-->
								<!--<td>0.0%</td>-->
								<!--<td>100%</td>-->
								<!--<td>0</td>-->
								<!---->
							<!--</tr>-->
							<!--<tr class="active">-->
								<!--<td>2</td>-->
								<!--<td>精制210g</td>-->
								<!--<td>100%</td>-->
                                <!--<td>5</td>-->
								<!--<td>7.18</td>-->
								<!--<td>6.5-6.7</td>-->
								<!--<td>0.0%</td>-->
								<!--<td>0.0%</td>-->
								<!--<td>100%</td>-->
								<!--<td>5</td>-->
								<!--<td>7.18</td>-->
								<!--<td>6.5-6.7</td>-->
								<!--<td>0.0%</td>-->
								<!--<td>0.0%</td>-->
								<!--<td>100%</td>-->
								<!--<td>0</td>-->
								<!---->
							<!--</tr>-->
						</table>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div th:include="include::footer"></div>
		<script type="text/javascript" th:inline="javascript">
            $().ready(function() {
                getTime()
                table()
            })

            function table() {
                var result = [[${result}]];
                console.log(result)
                var head = result.head;
                var subTitle = result.subTitle;
                var contentList = result.content;

                var col =head.length  * subTitle.length;
                
                var htmlText = "<table class='table table-bordered table-hover'>"
				htmlText += "<tr class='success'>" +
                    "<td colspan='"+col+"' style='text-align: center'>统计时间："+getNowDate()+"</td>" +
                    "</tr>"
				//表头
				htmlText += "<tr class='warning'>"
				for (var i in head){
                    var item = head[i];
                    if(i>2){
                        htmlText += "<td  colspan='6'> "+item+"</td>"
					}else{
                        htmlText += "<td>"+item+"</td>"
					}
				}
                htmlText += "</tr>"


				//副标题
                htmlText += "<tr class='active'>"
				for (var i in head){
                    if(i>2){
                        for (var j in subTitle){
                            htmlText += "<td> "+subTitle[j]+"</td>"
						}
                    }else{
                        htmlText += "<td></td>"
                    }
				}
                htmlText += "</tr>"

				//内容
				for (var i in contentList){
                    htmlText += "<tr class='active'>"
				    var content = contentList[i];
				    for (var j in content){
				        if (j>2){
				            var item = content[j];
                            var cNum = new Array();
                            if (item.consultNum!= null && item.consultNum != '-' ) {
                                cNum = item.consultNum.split("-")
                            }
                            htmlText += "<td> "+item.countNum+"</td>"

                            if (item.avgNum < cNum[0]){
                                htmlText += "<td><span style='color: #47DCE7 '>"+item.avgNum+"</span></td>"
							}else if(item.avgNum > cNum[1]){
                                htmlText += "<td><span style='color: #e7262a'>"+item.avgNum+"</span></td>"
							}else {
                                htmlText += "<td> "+item.avgNum+"</td>"
							}

                            htmlText += "<td> "+item.consultNum+"</td>"
							if (item.high != null && item.high != '-' && item.high != '0.0%') {
                                htmlText += "<td> <span style='color: #e7262a'>"+item.high+"</span></td>"
							}else{
                                htmlText += "<td> "+item.high+"</td>"
							}


                            if (item.flat != null && item.flat != '-' && item.flat != '0.0%') {
                                htmlText += "<td> <span style='color: #47DCE7'>"+item.flat+"</span></td>"
                            }else{
                                htmlText += "<td> "+item.flat+"</td>"
                            }
                            htmlText += "<td> "+item.right+"</td>"
						}else{
                            htmlText += "<td> "+content[j]+"</td>"
						}
					}
                    htmlText += "</tr>"
				}

				$("#table").empty();
				$("#table").html(htmlText);

            }
            
            function getNowDate() {
				var date = new Date();
//				date = date.format("yyyy-MM-dd")
                var result = DateFormat.format(date,"yyyy-MM-dd");
				return result;
            }

            function returnStep() {
                window.history.back(-1)
            }
            
            function getTime() {
//                var day2 = new Date();
//                day2.setTime(day2.getTime());
//                var s2 = day2.getFullYear()+"-" + (day2.getMonth()+1) + "-" + day2.getDate();
                $("#statisticsTime").text(getNowDate())
            }
		</script>
	</body>

</html>